<template>
    <div class="p-sm h-full min-h-500px flex-col-stretch gap-sm overflow-hidden lt-sm:overflow-auto bg-layout transition-300">
        <!-- search  -->
        <NCard v-if="$slots.searchForm" title="搜索" :bordered="false" size="small" class="mb-xs search-form card-wrapper">
          <slot name="searchForm"/>
          <NSpace justify="end" >
            <n-space>
              <NButton @click="reset">
                <template #icon>
                  <icon-ic-round-refresh class="text-icon" />
                </template>
                重置
              </NButton>
            </n-space>
            <n-space>
              <NButton type="primary" ghost @click="search">
                <template #icon>
                  <icon-ic-round-search class="text-icon" />
                </template>
                搜索
              </NButton>
            </n-space>
            </NSpace>
        </NCard>
        <!-- table -->
        <NCard title="列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper  flex-col flex-1">
          <template #header-extra>
            <n-space justify="space-between"  class="mb-xs">
                <n-space>
					 				<!-- 按钮组 -->
									<slot name="btnBar"/>
								</n-space>
								<n-space>
									 <!-- 工具组 -->
									<slot name="toolBar"/>
								</n-space>
            </n-space>
          </template>
            <slot name="dataTable"/>

      </NCard>
    </div>
</template>

<script  setup lang='ts' >
defineOptions({ name: 'SContainer' });

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();
async function reset() {
  emit('reset');
}
async function search() {
  emit('search');
}
</script>

<style lang='scss' scoped>
:deep(.n-card__content) {
    display: flex;
    flex-direction: column;

}
:deep(.n-form--inline){
    flex-wrap: wrap;
}
.search-form{
	margin-bottom: .5rem;
}
:deep(.search-form .n-form-item){
	margin-bottom: .5rem;
}
:deep(.search-form .n-form-item .n-form-item-feedback-wrapper){
	display: none;
}
</style>
